<template>
  <div
    style="
      height: 853px;
      padding-bottom: 37px;
      overflow: auto;
      overflow-x: hidden;
    "
  >
    <el-form ref="ruleForm" :model="ruleForm" :rules="myRules">
      <el-form-item label="" prop="camera_number">
        <div style="margin-top: 20px">
          <span class="cameraStyle_bixuan">*</span
          ><span class="cameraStyle">cameraNum<br /></span>
          <!-- <el-form-item label=""> -->
          <!-- <el-form :model="ruleForm" :rules="rules"> -->
          <!-- <el-form-item label="123" prop="camera_number"> -->
          <el-select
            v-model="ruleForm.camera_number"
            placeholder="请选择"
            style="padding-left: 15px; width: 96.7%; margin-bottom: -30px"
          >
            <el-option
              style="font-size: 20px"
              v-for="(item, index) in cameraList"
              :key="index"
              :value="item"
              :label="item"
            ></el-option>
          </el-select>
          <!-- </el-form-item -->
          <!-- ></el-form> -->
        </div></el-form-item
      >
      <!-- <el-form-item label="" prop="ip_input">
        <div style="margin-top:20px;">
          <span class="cameraStyle">ip<br /></span>
          <el-input v-model="ruleForm.ip_input"></el-input>
        </div>
      </el-form-item> -->
      <!-- <el-form-item> -->
      <ncform
        :form-schema="formSchema"
        form-name="your-form-name"
        v-model="formSchema.value"
        @submit="submit()"
      ></ncform>
      <!-- </el-form-item> -->
      <el-form-item>
        <div style="text-align: center">
          <el-button @click="submit('ruleForm')">开始测试</el-button>
        </div></el-form-item
      >
    </el-form>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { reqDeviceUsersInfo } from "@/api";

export default {
  data() {
    return {
      camera_number: "",

      ruleForm: {
        camera_number: "",
        // ip_input: this.stateIp
      },
      myRules: {
        camera_number: [
          {
            required: true,
            // pattern: "[^ \x22]+",
            message: "请进行选择",
            trigger: "change",
          },
        ],
      },
      formSchema: {
        type: "object",
        properties: {
          // ip: {
          //   type: "string",
          //   value: this.$store.state.stateIp_vTBegin,
          //   ui: {
          //     columns: 6,
          //     label: "ip",
          //   },
          // },
          // port: {
          //   type: "Number",
          //   value: this.$store.state.statePort_vTBegin,
          //   ui: {
          //     columns: 6,
          //     label: "port",
          //   },
          // },
          // user: {
          //   type: "string",
          //   value: this.$store.state.stateUser_vTBegin,
          //   ui: {
          //     columns: 6,
          //     label: "user",
          //   },
          // },
          // command: {
          //   type: "object",
          //   properties: {
          // serverIp: {
          //   type: "string",
          //   value: this.$store.state.stateServerIp_vTBegin,
          //   ui: {
          //     columns: 6,
          //     label: "serverIp",
          //   },
          // },
          // serverPort: {
          //   type: "number",
          //   value: this.$store.state.stateServerPort_vTBegin,
          //   ui: {
          //     columns: 6,
          //     label: "serverPort",
          //   },
          // },
          // pubName: {
          //   type: "string",
          //   value: this.$store.state.statePubName_vTBegin,
          //   // value: "/live",
          //   ui: {
          //     columns: 6,
          //     label: "pubName",
          //   },
          // },
          // authInfo: {
          //   type: "string",
          //   value: this.$store.state.stateAuthInfo_vTBegin,
          //   // value: "",
          //   ui: {
          //     columns: 6,
          //     label: "authInfo",
          //   },
          // },
          video: {
            type: "object",
            properties: {
              plan: {
                type: "string",
                rules: {
                  required: true,
                  // errMsg: "Please fill in a valid email address"
                  // minLength: 10
                },
                ui: {
                  // description:
                  //   "Currently only select, radio, checkbox supports this feature.",
                  label: "方案",
                  widget: "select",
                  widgetConfig: {
                    itemDataKey: "selectedItem",
                    enumSource: [
                      {
                        value: "1",
                        label: "方案一 (低码流32K)",
                        width: "352",
                        height: "288",
                        framerate: 25,
                        iframe: 50,
                        bitrate: 32,
                        videoType111: "0",
                      },
                      {
                        value: "2",
                        label: "方案二 (低码流128K)",
                        width: "352",
                        height: "288",
                        framerate: 25,
                        iframe: 50,
                        bitrate: 128,
                        videoType111: "0",
                      },
                      {
                        value: "3",
                        label: "方案三 (高码流1M)",
                        width: "720",
                        height: "576",
                        framerate: 25,
                        iframe: 50,
                        bitrate: 1024,
                        videoType111: "1",
                      },
                      {
                        value: "4",
                        label: "方案四 (高码流2M)",
                        width: "1280",
                        height: "720",
                        framerate: 25,
                        iframe: 50,
                        bitrate: 2048,
                        videoType111: "1",
                      },
                      {
                        value: "5",
                        label: "方案五 (高码流1M)",
                        width: "1920",
                        height: "1080",
                        framerate: 25,
                        iframe: 50,
                        bitrate: 1024,
                        videoType111: "1",
                      },
                    ],
                  },
                },
              },
              width: {
                valueTemplate: 'dx: {{$temp.selectedItem.width}} || ""',
                type: "string",
                ui: { columns: 6, label: "width" },
              },
              height: {
                valueTemplate: 'dx: {{$temp.selectedItem.height}} || ""',
                type: "string",
                ui: { columns: 6, label: "height" },
              },
              framerate: {
                valueTemplate: 'dx: {{$temp.selectedItem.framerate}} || ""',
                type: "number",
                ui: { columns: 6, label: "framerate" },
              },
              iframe: {
                valueTemplate: 'dx: {{$temp.selectedItem.iframe}} || ""',
                type: "number",
                ui: { columns: 6, label: "iframe" },
              },
              bitrate: {
                valueTemplate: 'dx: {{$temp.selectedItem.bitrate}} || ""',
                type: "number",
                ui: { columns: 6, label: "bitrate" },
              },
              videoType111: {
                valueTemplate: 'dx: {{$temp.selectedItem.videoType111}} || ""',
                type: "string",
                ui: { columns: 6, label: "videoType" },
              },
            },
            ui: {
              label: "",
            },
          },
        },
        ui: {
          label: "",
        },
      },
      //   },
      // },
    };
  },
  props: ["queryType", "company"],
  computed: {
    ...mapState([
      "cameraList",
      // "stateIp_vTBegin",
      // "statePort_vTBegin",
      // "stateUser_vTBegin",
      // "stateServerIp_vTBegin",
      // "stateServerPort_vTBegin",
      // "statePubName_vTBegin",
      // "stateAuthInfo_vTBegin",
      // "beginExsitInfo",
    ]),
    // cameranumResults: function() {
    //   var final_results = {};
    //   final_results.camera = this.sendOutParams.analyses.split(
    //     "****************************** 结果如下 ******************************"
    //   )[
    //     this.sendOutParams.analyses.split(
    //       "****************************** 结果如下 ******************************"
    //     ).length - 1
    //   ];
    //   final_results.code = this.sendOutParams.code;
    //   final_results.msg = this.sendOutParams.msg;
    //   return final_results;
    // }
  },

  mounted() {
    this.getDeviceUsersDefinitelyInfo(this.company);
  },

  watch: {
    company: {
      handler(val) {
        this.getDeviceUsersDefinitelyInfo(val);
      },
    },
  },

  methods: {
    ...mapActions(["getQueryInfo_vTBegin", "getDeviceUsersDefinitelyInfo"]),

    // //获取厂商已有信息
    // async getDeviceUsersDefinitelyInfo(companyName) {
    //   let param = { username: companyName };
    //   let resData = await reqDeviceUsersInfo(param);
    //   this.formSchema.value.ip = resData.ip;
    //   this.formSchema.value.user = resData.sywg_username;
    //   this.formSchema.value.port = resData.port;
    //   console.log("this.formSchema.value:", this.formSchema.value);
    // },

    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let height_float = parseFloat(this.formSchema.value.video.height);
          let width_float = parseFloat(this.formSchema.value.video.width);

          let videoType_int = parseInt(
            this.formSchema.value.video.videoType111
          );
          let sendCompany = this.company;
          let sendParams = {
            cameraNum: this.ruleForm.camera_number,
            width: width_float,
            height: height_float,
            bitrate: this.formSchema.value.video.bitrate,
            iframe: this.formSchema.value.video.iframe,
            framerate: this.formSchema.value.video.framerate,
            videoType: videoType_int,
          };
          this.getQueryInfo_vTBegin({ sendCompany, sendParams });
        } else {
          return false;
        }
      });

      // this.getQueryInfo(params);

      // this.$ncformValidate("your-form-name").then(data => {
      //   if (data.result) {
      //     alert(JSON.stringify(this.$data.formSchema.value, null, 2));
      //     //console.log(this.$data.formSchema.value);
      //     // do what you like to do
      //   }
      // });
    },
  },
};
</script>

<style>
.cameraStyle {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
  /* float: left; */
  line-height: 40px;
  padding: 0 12px 0 0 !important;
  box-sizing: border-box;
  color: #0d285d;
  margin-left: -5px !important;
}
.cameraStyle_bixuan {
  font-size: 20px;
  font-weight: bold;
  text-align: right;
  vertical-align: middle;
  /* float: left; */
  line-height: 40px;
  padding: 0 12px 0 0 !important;
  box-sizing: border-box;
  color: #fa5555;
  margin-left: 15px;
}
.el-form-item__error {
  color: red;
  font-size: 17px !important;
  /* font-weight: bold; */
  padding-left: 2% !important;
}
.ncform {
  margin-top: -16px !important;
}
</style>
